<template>
  <div 
    class="ui-dialog" 
    :class="[
      show ? 'ui-dialog_show' : ''
    ]">
    <div @click.self="show = false" v-if="mask" class="ui-dialog__mask"></div>
    <div ref="dialogInner" class="ui-dialog__inner">
      <div v-if="!hiddenHead" class="ui-dialog__head">
        <h3 class="ui-dialog__title">{{title}}</h3>
        <span @click="show = false" class="ui-dialog__close">
          <span class="ui-icon ui-icon__close"></span>
        </span>
      </div>
      <div class="ui-dialog__body">
        <slot/>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'GzhbDialog',
    props: {
      hiddenHead: {
        type: Boolean,
        default() {
          return false
        }
      },
      title: {
        type: String,
        default() {
          return '标题'
        }
      },
      visible: {
        type: Boolean,
        default() {
          return false
        }
      },
      mask: {
        type: Boolean,
        default() {
          return true
        }
      }
    },
    watch: {
      visible(n) {
        this.show = n
      },
      show(n) {
        this.$emit('update:visible', n)
      }
    },
    created() {
      this.show = this.visible
    },
    data() {
      return {
        show: false
      }
    }
  }
</script>

<style lang="less" scoped>
.ui-dialog {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  opacity: 0;
  z-index: -1;
}
.ui-dialog_show{
  opacity: 1;
  z-index: 1999;
}
.ui-dialog__mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .4);
}
.ui-dialog__inner {
  position: relative;
  top: 50%;
  left: 50%;
  border-radius: 2.5vw;
  width: 84%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
.ui-dialog__head {
  background-color: #f9f9f9;
  padding: 16px 0 12px 0;
  border-top-left-radius: 2.5vw;
  border-top-right-radius: 2.5vw;
  position: relative;
}
.ui-dialog__title {
  font-size: 3.75vw;
  padding-left: 3.125vw;
  font-weight: 700;
}
.ui-dialog__close {
  position: absolute;
  right: 3.125vw;
  top: 12px;
  .ui-icon {
    font-size: 2.81vw;
    color: #999;
  }
}
</style>